'use strict'

import React, { Component } from 'react'
import Alert from '../../ui/dialog/Alert'
import Confirm from '../../ui/dialog/Confirm'
import Toast from '../../ui/dialog/Toast'
import store from './store'

export default class Dialog extends Component {
    constructor(props) {
        super(props)
        this.state = store.getInitialState()
        this.trigger = false
        this._onChange = this._onChange.bind(this)
    }

    _onChange() {
        this.trigger = true
        this.setState(store.getState())
    }

    shouldComponentUpdate() {
        return this.trigger
    }

    componentDidUpdate() {
        this.trigger = false
    }

    componentDidMount() {
        store.addChangeListener(this._onChange)
    }

    componentWillUnmount() {
        store.removeChangeListener(this._onChange)
    }

    render() {
        return (
            <div>
                <Toast on={this.state.toast.on}
                       message={this.state.toast.message}
                       duration={this.state.toast.duration}/>

                <Alert on={this.state.alert.on}
                       message={this.state.alert.message}
                       ok={this.state.alert.ok}
                       okLabel={this.state.alert.okLabel}
                       title={this.state.alert.title}/>

                <Confirm on={this.state.confirm.on}
                         message={this.state.confirm.message}
                         title={this.state.confirm.title}
                         ok={this.state.confirm.ok}
                         okLabel={this.state.confirm.okLabel}
                         cancel={this.state.confirm.cancel}
                         cancelLabel={this.state.confirm.cancelLabel}/>
            </div>
        )
    }
}

Dialog.defaultProps = {}
Dialog.propTypes = {}
